<template>
  <Pagination
    :pageSizeOptions="pageSizeOptions"
    :total="total"
    showSizeChanger
    :pageSize="pageSize"
    v-model="current"
    @change="onPageChange"
    @showSizeChange="onShowSizeChange"
  >
    <template slot="buildOptionText" slot-scope="props">
      <span v-if="props.value!==total">{{props.value}}{{ $t('incomePage.t') }}/{{ $t('incomePage.y') }}</span>
      <span v-if="props.value===total">{{ $t('incomePage.qb') }}</span>
    </template>
  </Pagination>
</template>
<script>
import { Pagination } from 'ant-design-vue'

export default {
  components: {
    Pagination
  },
  data () {
    return {
      pageSizeOptions: ['20', '30', '40', '50', '100'],
      current: 1,
      pageSize: 0,
      total: 0
    }
  },
  props: [
    'curr',
    'size',
    'all'
  ],
  methods: {
    onShowSizeChange (current, pageSize) {
      this.pageSize = pageSize
      this.$emit('changePageSize', pageSize)
    },
    onPageChange (page) {
      this.current = page
      this.$emit('changePage', page)
    }
  },
  mounted () {
    this.pageSize = parseInt(this.size)
    this.total = parseInt(this.all)
    this.current = parseInt(this.curr)
  },
  watch: {
    all (val) {
      this.total = val
    }
  }
}
</script>
